<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>3.JSX</title>
</head>

<body>
    <div id="root"></div>

    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
        //创建react元素
            //使用JSX语法来创建 React元素
            //1.基本使用
            // const element =
            // <h1 id='title' className='title' title='这是一个标题'>
            //     hello react
            // </h1>

            //2.复杂使用
        //     const element = (
        //  <div>
        //     <ul>
        //         <li>
        //             <a href="http://www.atguigu.com">尚硅谷</a>
        //         </li>
        //     </ul>
        //     <ul>
        //         <li>
        //             <a href="http://www.atguigu.com">尚硅谷</a>
        //         </li>
        //     </ul>
        //     <ul>
        //         <li>
        //             <a href="http://www.atguigu.com">尚硅谷</a>
        //         </li>
        //     </ul>
        //   </div>
        //     );

        //3.渲染JS 语句
        const link = "https://www.atguigu.com";
        const linkText = '尚硅谷';
        //JSX语法中使用{}来渲染js数据
        const element =
        <ul>
            <li>
                <a href="{link}">
                    {linkText}</a>
            </li>
        </ul>

        //4.JSX 语法注意事项: 1.必须有一个跟标签(创建react标签 必须被一个标签包裹)
                        //  2.标签必须有结束符

            //渲染元素
            ReactDOM.createRoot(document.getElementById('root')).render(element);
        </script>
</body>

</html>